<template>
  <view class="">
    <view v-if="list.length > 0" class="">
      <!-- 答题类 -->
      <answer v-if="quest.mode == 3" ref="answerRef" :quest="quest" @choice="onChoice"></answer>
      <!-- 行为类 -->
      <behavior v-if="quest.mode == 1" ref="behaviorRef" :ids-data="idsData" :quest="quest"
                @uploadImg="uploadImg"></behavior>
      <view class="btnBox">
        <view v-if="index > 0" class="btn btnOne" @click="indexEvent(1)">
          上一任务
        </view>
        <view v-if="submitBoole == true && quest.isComplete == false && getSignStatus == true && idsData.locked && UnlockBoole
				" class="btn btnTwo" @click="submitEvent">
          提交
        </view>
        <view v-if="quest.isComplete == false && getSignStatus == true && idsData.locked && !UnlockBoole"
              class="btn btnFour">
          未解锁
          <!--          <image src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/loack.png" mode="aspectFit"-->
          <!--                 class="lockedBox" v-if="!UnlockBoole"></image>-->
        </view>
        <view v-if="quest.isComplete == false && quest.isComplete == false && getSignStatus == false && idsData.locked
				" class="btn btnFour" @click="submitEvent">
          待签到
        </view>
        <view v-if="quest.isComplete && idsData.locked" class="btn btnThree">
          已提交
        </view>
        <view v-if="index + 1 < list.length" class="btn btnOne" @click="indexEvent(2)">
          下一任务
        </view>
        <!-- <view class="btn btnTwo" @click="submitEvent">
          提交
        </view> -->
      </view>
    </view>
    <view v-else-if="dataLoaded" class="">
      <u-empty icon="https://hzdaoziji.oss-cn-hangzhou.aliyuncs.com/file39162cf755ef44228a8c0bf7f92696d0.png"
               mode="data">
      </u-empty>
    </view>

    <tui-modal :show="errorShow" custom maskClosable padding="10">
      <view class="errorBox">
        <view class="errorTitle">
          提示
        </view>
        <view class="errorText">
          回答错误,再考虑一下吧!
        </view>
        <view class="errorButton">
          <view class="ButtonBox buttonOne" @click="continueClick">
            继续提交
          </view>
          <view class="ButtonBox buttonTwo" @click="againClick">
            重新选择
          </view>
        </view>
      </view>
    </tui-modal>

    <!-- 结果 -->
    <zy-pass ref="zPass" :obj="passObj"></zy-pass>
  </view>
</template>

<script>
import answer from "./answer.vue"
import behavior from "./behavior.vue"
import {
  historyFindOneTask,
  historyDoTask,
  historyScenicClearance,
  historyGetSign,
  checkTaskUnlock
} from "@/api/challenge";

export default {
  components: {
    answer,
    behavior
  },
  props: {
    idsData: {
      type: Object,
      default: {},
    },
  },
  data() {
    return {
      list: [], //全部任务
      index: 0,
      quest: {}, //当前任务
      submitBoole: false,
      select: null,
      partyId: "",
      scenicId: "",
      groupScenicId: '',
      url: null,
      clearanceNumber: 0,
      totalDistance: 0,
      getSignStatus: false,
      getSignStatusData: 0,
      isReoprtBoole: false,
      passObj: {}, // 结果参数
      UnlockBoole: false,
      errorShow: false,
      dataLoaded: false
    }
  },
  onReady() {
    this.partyId = this.idsData.partyId
    this.scenicId = this.idsData.scenicId
    this.groupScenicId = this.idsData.groupScenicId
    if (this.idsData.totalDistance == 'null') {
      this.totalDistance = 0
    } else {
      this.totalDistance = this.idsData.totalDistance
    }
    this.getHistoryFindTask(this.partyId, this.scenicId)
    this.historyGetSignEvent()
  },
  methods: {
    errorShowClick() {
      console.log('111', 1111);
      this.errorShow = true
    },
    /**查询签到状态/是否已完成 */
    historyGetSignEvent() {
      historyGetSign({
        partyId: this.partyId,
        scenicId: this.scenicId
      }).then(res => {
        this.getSignStatusData = res.getSignStatusData
        if (res.status == 1) {
          this.getSignStatus = true
        } else {
          this.getSignStatus = false
        }
        if (res.isReoprt == 1) {
          this.isReoprtBoole = false
        } else {
          this.isReoprtBoole = true
        }
      })
    },
    /** 获取景点任务*/
    getHistoryFindTask(partyId, scenicId) {

      var that = this
      historyFindOneTask({
        partyId,
        scenicId,
      }).then((res) => {

        this.completeCount = res.completeCount;
        this.umCompleteCount = res.umCompleteCount;
        // this.list = res.scenicTaskDtos.filter(el => el.status == 0)
        this.list = res.scenicTaskDtos.filter((el) => el.status != 2);
        console.log("this.list", this.list)
        this.clearanceNumber = 0
        this.list.forEach(item => {
          if (item.isComplete == false) {
            this.clearanceNumber += 1
          }
        })

        if (this.clearanceNumber == 0 && this.getSignStatus && this.isReoprtBoole) {
          historyScenicClearance({
            partyId: that.partyId,
            groupScenicId: that.groupScenicId,
            mileage: that.totalDistance
          }).then(res => {
            console.log('通关', res);
            if (res.umCompleteScenicCount == 0) {
              // 正式
              that.passObj = {
                // itineraryId: that.quest.itineraryId,
                partyId: that.partyId,
                ...res,
              };
              that.$refs.zPass.show();
            }
          })
        }
        this.watchFn();
        this.dataLoaded = true
      }).catch(err => {
        // console.log('这个啥', err);
        // console.log("==========err",err)
        // uni.navigateBack();
        // uni.showToast({
        // 	title: err.msg,
        // 	icon: "none",
        // 	duration: 2000,
        // 	success: () => {
        // 		let timer = setTimeout(() => {
        // 			clearTimeout(timer);
        // 			uni.navigateBack({
        // 				delta: 1
        // 			})
        // 		}, 2000)
        // 	}
        // })
        this.dataLoaded = true
      });
    },
    /** 执行任务 */
    watchFn() {
      this.quest = null
      this.quest = this.list[this.index] || {};
      // this.quest = this.list.filter(el => el.status != 2 && el.mode == 2)[this.index] || {} // 视频
      // this.questObj = null;

      checkTaskUnlock({
        scenicTaskId: this.quest.scenicTaskId
      }).then(res => {

        this.UnlockBoole = res
      })
      if (this.quest.mode == 1) {
        this.$refs.behaviorRef.isComplete = this.quest.isComplete
        if (this.quest.isComplete == true) {
          this.$refs.behaviorRef.imgList = []
          this.$refs.behaviorRef.imgList = this.quest.userImg.split(',')
        } else {
          this.$refs.behaviorRef.imgList = []
        }
      } else if (this.quest.mode == 3) {
        this.$refs.answerRef.isComplete = this.quest.isComplete
        if (this.quest.isComplete == true) {
          this.$refs.answerRef.iList = []
          for (let i = 0; i < this.quest.userSelect.length; i++) {
            this.$refs.answerRef.iList.push(this.quest.userSelect[i])
          }
        } else {
          this.$refs.answerRef.iList = []
        }
      }
      console.log("this.quest", this.quest)
      // if (this.quest.status == 1) {
      // 	this.questObj = this.quest;
      // 	// 剧本
      // 	this.$refs.zQuest.show();
      // }
    },
    /**选择项 */
    onChoice(e) {
      console.log('主页面', e);
      var aData = ""
      e.forEach(item => {
        aData += item
      })
      this.select = aData;
      this.submitBoole = true
    },
    /**行为类 */
    uploadImg(e) {
      console.log(e == "");
      if (e == "") {
        this.url = ""
        this.submitBoole = false
      } else {
        this.url = e
        this.submitBoole = true
      }
    },
    /**提交 */
    submitEvent() {

      if (this.UnlockBoole == true) {
        if (this.quest.mode == 1) {
          historyDoTask({
            partyId: this.partyId,
            scenicTaskId: this.quest.scenicTaskId,
            url: this.url,
          }).then((res) => {
            this.url = null;

            this.getHistoryFindTask(this.partyId, this.scenicId)
            this.$refs.behaviorRef.isComplete = true
            this.clearanceNumber -= 1
            if (this.clearanceNumber == 0 && this.getSignStatus && this.isReoprtBoole) {
              historyScenicClearance({
                partyId: this.partyId,
                groupScenicId: this.groupScenicId,
                mileage: this.totalDistance
              }).then(res => {
                console.log('通关', res);
                if (res.umCompleteScenicCount == 0) {
                  // 正式
                  this.passObj = {
                    // itineraryId: this.quest.itineraryId,
                    partyId: this.partyId,
                    ...res,
                  };
                  this.$refs.zPass.show();
                }
              })
            }
          });

        } else if (this.quest.mode == 3) {
          if (this.select == this.quest.trueSelect) {
            this.continueClick()
          } else {
            this.errorShow = true
          }
        }
      } else {
        uni.$u.toast("该任务未解锁!");
      }

    },
    /**上/下一个任务 */
    indexEvent(data) {
      // if(this.index + 1 < this.list.length){

      // }
      if (data == 1) {
        this.index -= 1
        this.watchFn()
      } else if (data == 2) {
        this.index += 1
        this.watchFn()
      }
    },
    /**重新选择 */
    againClick() {
      this.errorShow = false
    },
    /**继续提交 */
    continueClick() {
      this.errorShow = false
      historyDoTask({
        partyId: this.partyId,
        scenicTaskId: this.quest.scenicTaskId,
        select: this.select,
      }).then((res) => {
        this.select = null;
        this.getHistoryFindTask(this.partyId, this.scenicId)
        this.$refs.answerRef.isComplete = true
        this.clearanceNumber -= 1
        if (this.clearanceNumber == 0 && this.getSignStatus && this.isReoprtBoole) {
          historyScenicClearance({
            partyId: this.partyId,
            groupScenicId: this.groupScenicId,
            mileage: this.totalDistance
          }).then(res => {
            console.log('通关', res);
            if (res.umCompleteScenicCount == 0) {
              // 正式
              this.passObj = {
                // itineraryId: this.quest.itineraryId,
                partyId: this.partyId,
                ...res,
              };
              this.$refs.zPass.show();
            }
          })
        }
      });
    },
  }
}
</script>


<style lang="scss" scoped>
.btnBox {
  display: flex;
  justify-content: space-around;
  padding-bottom: 60rpx;

  .btn {
    width: 200rpx;
    height: 80rpx;
    line-height: 80rpx;
    border-radius: 12rpx;
    text-align: center;
    color: #fff;
  }

  .btnOne {
    background-color: #4186f5;
  }

  .btnTwo {
    position: relative;
    background-color: #28b78d;
  }

  .btnThree {
    background-color: #99cbaf;
  }

  .btnFour {
    background-color: #cccccc;
    position: relative;

    .lockedBox {
      width: 72rpx;
      height: 76rpx;
      position: absolute;
      left: calc(50% + 36rpx);
    }
  }
}

.errorBox {
  font-family: PingFang SC, PingFang SC-Regular;

  .errorTitle {
    font-size: 40rpx;
    font-weight: 800;
    padding: 44rpx 0 26rpx 0;
    text-align: center;
  }

  .errorText {
    text-align: center;
    padding-bottom: 46rpx;
  }

  .errorButton {
    width: 100%;
    height: 100rpx;
    display: flex;

    .ButtonBox {
      width: 50%;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;

    }

    .buttonOne {
      background-color: #eeeeee;
      color: #212121;
      border-bottom-left-radius: 20rpx;
    }

    .buttonTwo {
      background-color: #4186f5;
      color: #fff;
      border-bottom-right-radius: 20rpx;
    }
  }
}
</style>
